import React, { memo, useState } from 'react'
import { Tooltip } from 'antd'

function SvgIcon(props) {
    const {
        svgName,
        iconSize = 24,
        hasHover = false,
        iconColor = '#000000',
        hoverColor = '#000000',
        className,
        needPointer = false,
        toolTipValue
    } = props

    const [svgColor, setSvgColor] = useState(iconColor)

    const handleMouseEnter = () => {
        if (hasHover) {
            setSvgColor(hoverColor)
        }
    }

    const handleMouseLeave = () => {
        if (hasHover) {
            setSvgColor(iconColor)
        }
    }

    return (
        <Tooltip title={toolTipValue} arrow={false}>
            <div
                id="svg-icon"
                style={{
                    width: iconSize,
                    height: iconSize,
                    cursor: needPointer ? 'pointer' : 'normal'
                }}
                className={className}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            >
                <svg fill={svgColor} style={{ width: '100%', height: '100%' }}>
                    <use xlinkHref={`#svg-${svgName}`} />
                </svg>
            </div>
        </Tooltip>
    )
}

export default memo(SvgIcon)